import React from 'react';
import { FieldProps } from '@rjsf/utils';
import { Select } from 'antd';
import { Icon } from '@amcax/base';
import { SelectionContent } from './content';
import styles from './styles.module.scss';

const { Option } = Select;
// 选择器
export const SelectionField = ({
  schema,
  formData,
  onChange,
  onFocus,
  uiSchema,
  disabled,
}: FieldProps<string>) => {
  const initData = formData ?? (schema.default as string);
  let selectList = null;
  const options = uiSchema['ui:options']?.options;
  if (schema?.oneOf != null || schema?.enum) {
    selectList = schema.oneOf ?? schema.enum;
  } else if (Array.isArray(options)) {
    selectList = options;
  }

  const isPicker = uiSchema['ui:options']?.isPicker;
  return (
    <SelectionContent
      layout={uiSchema['ui:layout']}
      schema={schema}
      uiSchema={uiSchema}
      isPicker={isPicker}
      onFocus={onFocus}
      disabled={disabled ? disabled : uiSchema['ui:disabled']}
      formData={initData}>
      {selectList ? (
        <Select
          allowClear={schema.allowClear}
          style={{ width: '100%' }}
          dropdownStyle={{ borderRadius: '4px' }}
          placeholder='请选择'
          value={initData}
          disabled={disabled ? disabled : uiSchema['ui:disabled']}
          onChange={(value) => onChange(value)}>
          {selectList.map((item, index) => (
            <Option
              key={index}
              className={styles._select_option}
              disabled={item.disabled}
              value={item.const}
              label={item.title}>
              {item.icon && (
                <Icon
                  tabIndex={0}
                  style={{ fontSize: '16px' }}
                  name={item.icon}
                />
              )}
              {item.title}
            </Option>
          ))}
        </Select>
      ) : (
        <>
          {formData}
          {options}
        </>
      )}
    </SelectionContent>
  );
};
/**
 *
 * */
